<template>
	<view>
		<text>{{txt1}}</text>
		<text>{{animatedNumber.toFixed(decimalPlaces)}}</text>
		<text>{{txt2}}</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 注册父级可调用的方法
	defineExpose({
		startAnimation
	})
	const props = defineProps({
		txt1: {
			type: String,
			default: "" // 前方插入文字
		},
		txt2: {
			type: String,
			default: "" // 后方插入文字
		}
	});

	const animatedNumber = ref(0); // 当前动画数值
	const duration = 1500; // 动画持续时间（ms）
	const decimalPlaces = 2; // 小数点位数


	function startAnimation(v) {
		const startTime = Date.now();
		const startValue = 0;
		const endValue = Number(v);
		const updateNumber = () => {
			const currentTime = Date.now();
			const elapsedTime = currentTime - startTime;
			const progress = Math.min(elapsedTime / duration, 1); // 0 → 1

			// 使用缓动函数（easeOutQuad）
			const easedProgress = 1 - Math.pow(1 - progress, 2);

			animatedNumber.value = startValue + (endValue - startValue) * easedProgress;
			// console.log(animatedNumber.value);

			if (progress < 1) {
				requestAnimationFrame(updateNumber);
			} else {
				animatedNumber.value = endValue; // 确保最终值准确
			}
		};

		requestAnimationFrame(updateNumber);
	};
</script>

<style>

</style>